<template>
  <div class="c-bg-white c-ph24">
    <div class="c-flex-row c-justify-sb c-aligni-center c-w100 c-mt56">
      <div class="c-fs28 c-fc-xblack c-ww120 c-flex-shrink0">选择用户:</div>
      <div class="c-flex-row c-ww430 c-p">
        <div id="userList" class="c-bg-white c-pa top80 c-pz10 c-w100 c-p-l0 c-maxh270 c-contexty-scroll c-box-shadow2 c-br10 c-ph24 c-pv20" v-show="isShowDrop">
          <div class="c-hh70 c-fs22 c-flex-row c-aligni-center c-text-ellipsis1" v-if="userList.length > 0" :class="index != userList.length -1 ? 'c-bd-b1-f6' : ''" @click="selectUser(item)" v-for="(item, index) in userList" :key="index">
            <div class="c-ww44 c-hh44 c-brp50"><img class="c-w100 c-h c-brp50" :src="$addXossFilter(item.headimgurl, require('@/assets/defult_head.png'))"></div>
            <div class="c-ml10 maxw180 c-text-ellipsis1">{{item.nickname}}</div>
            <div class="c-ml10">(ID：{{item.userId}})</div>
          </div>
          <div class="c-hh60 c-fs22 c-flex-row c-aligni-center c-text-ellipsis1" v-if="userList.length == 0 && !isLoading">
            <div class="c-ml10">无结果</div>
          </div>
        </div>
        <input type="text" id="userName" v-model="userName" @input="inputText" :disabled="isDisabled" placeholder="请选择用户" @keyup.enter="searchInput" class="c-textAlign-l c-fs24 c-bd0 c-br10 c-flex-grow1 c-w0 c-fc-xblack c-hh70 c-flex-row c-flex-center c-bd1-ccc c-br8 c-ph20" />
        <div v-if="userName != ''" class="iconfont c-fs22 c-fc-gray center right80 c-pz10 c-ww40 c-pv10 c-textAlign-c" @click="clearUserName">&#xe6ec;</div>
        <div class="iconfont c-fs22 c-fc-sblack center c-p-r0 c-pv10 c-pz10 c-ww70 c-pr10 c-textAlign-c" @click="onShowDrop">&#xe6a9;</div>
      </div>
    </div>
    <div class="c-flex-row c-justify-sb c-aligni-center c-w100 c-mt56">
      <div class="c-fs28 c-fc-xblack c-ww120 c-flex-shrink0">金额/元 : </div>
      <div class="c-flex-row c-ww430 c-p">
        <input type="text" id="moneyGivenQuotaInput" v-model="moneyGivenQuotaInput" placeholder="请输入金额" @input="inputEnter" :class="isShowOverMoney?'c-bd1-xxlred':'c-bd1-ccc'" class="c-textAlign-l c-fs24 c-bd0 c-br10 c-flex-grow1 c-w0 c-fc-xblack c-hh70 c-flex-row c-flex-center c-br8 c-ph20" />
        <div v-if="isShowOverMoney" class="c-pa bottom-m30 c-p-l10 c-fs18 c-fc-xxlred">输入金额已超过￥{{currentUserData.moneyRemainingQuota ? currentUserData.moneyRemainingQuota : '0.00'}}</div>
      </div>
    </div>
    <div class="c-flex-row c-justify-sb c-aligni-center c-w100 c-mt56">
      <div class="c-fs28 c-fc-xblack c-ww120 c-flex-shrink0">VIP/个</div>
      <shop-number :min='0' :max="currentUserData!=null?currentUserData.vipRemainingQuota:0" :inputNum='defultBuyNum' @subNum='subVipNum' @addNum='addVipNum' @inputChange='inputVipChange'></shop-number>
    </div>
    <div class="c-flex-row c-justify-sb c-aligni-center c-w100 c-mt36" v-if="companyAuth.enableSvipModule == 1">
      <div class="c-fs28 c-fc-xblack c-ww120 c-flex-shrink0">SVIP/个</div>
      <shop-number :min='0' :max="currentUserData!=null?currentUserData.svipRemainingQuota:0" :inputNum='defultBuyNum' @subNum='subSvipNum' @addNum='addSvipNum' @inputChange='inputSvipChange'></shop-number>
    </div>
    <div class="c-flex-row c-justify-center c-aligni-center c-w100 c-mt64 c-hh80 theme-bg c-br10" @click="presentShareQuota">
      <div class="c-fc-white c-fs28">确定</div>
    </div>
    <div class="c-fs24 theme-fc c-flex-row c-justify-center c-aligni-center c-w100 c-mt64">
      <div class="theme-bd-b1" @click="onShowDesc">代理商分卡说明</div>
    </div>
  </div>
</template>

<script>
import { utilJs } from "@/utils/common.js";
import ShopNumber from "@/components/templates/shopNumber.vue";
export default {
  name: 'SubCardSetting',
  components: {
    ShopNumber
  },
  props: [],
  beforeCreate() {

  },
  data() {
    return {
      theme: localStorage.getItem("colorName") || "mb5_default",
      companyName: window.localStorage.getItem("companyName"),
      companyAuth: JSON.parse(localStorage.getItem("companyAuth")),
      page: 1,
      limit: 10,
      is_page: true,
      isLoading: false,
      userName: '',
      searchText: '',
      defultBuyNum: 0,
      isShowDrop: false, // 是否显示下拉框
      currentUserData: null, // 当前用户名额/金额信息
      userList: [], // 用户列表
      moneyGivenQuotaInput: '', // 输入的金额
      vipGivenQuotaInput: 0, // 输入的vip个数
      svipGivenQuotaInput: 0, // 输入的svip个数
      currentUserId: '', // 当前选中的用户id
      isShowOverMoney: false, // 是否显示输入金额超出提醒
      isDisabled: false,
    }
  },
  created() {
    utilJs.appShare(this);
  },
  mounted() {

  },
  computed: {

  },
  watch: {

  },
  methods: {
    clearUserName() {
      this.userName = '';
      this.currentUserId = '';
      this.searchText = '';
      this.isDisabled = false;
      this.isShowDrop = false;
    },
    onShowDesc() {
      this.$cjConfirm({
        title: '提示',
        message: "<div class='c-w100 c-fs24 c-textAlign-l'><p>1、什么是代理商分卡？</p><p>您旗下的服务商,可以直接从您这里批发名额和金额数量，这个功能就叫服务商分卡；</p><p>2、批发的名额和金额额度的用途？</p><p>服务商A，名下有名额时，他直接推广用户B升级会员时，用户B升级支付的钱，全部归A所有，且A对应的名额减1；</p><p>服务商A，名下有金额额度时，他直接推广用户B购买课程时，用户B购买支付的钱，全部归A所有，且A扣减对应的金额额度；</p><p>3、分卡设置页面，选择的用户需满足什么条件？</p><p>用户必须是您旗下的服务商，且身份不能比您高；</p></div>",
        showCancelButton: false,
        clickCloseModal: false
      })
    },
    onShowDrop() {
      if (!this.isShowDrop) {
        this.getUserByVipType();
      }
      this.isShowDrop = !this.isShowDrop;
    },
    selectUser(item) {
      this.currentUserId = item.userId;
      this.searchText = item.userId;
      this.userName = item.nickname + '（ID：' + item.userId + '）';
      this.isDisabled = true;
      this.isShowDrop = false;
    },
    inputEnter(e) {
      this.moneyGivenQuotaInput = e.target.value.replace(/[^\d.]/g, '').replace(/\.{2,}/g, '.').replace('.', '$#$').replace(/\./g, '').replace('$#$', '.').replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3').replace(/^\./g, '');
      if (Number(this.moneyGivenQuotaInput) > Number(this.currentUserData.moneyRemainingQuota)) {
        this.isShowOverMoney = true;
      } else {
        this.isShowOverMoney = false;
      }
    },
    inputText(e) {
      this.searchText = e.target.value;
    },
    searchInput(e) {
      this.page = 1;
      this.is_page = true;
      this.userList = [];
      this.searchText = e.target.value;
      this.getUserByVipType();
    },
    subVipNum(e) {
      if (this.vipGivenQuotaInput > 0) {
        this.vipGivenQuotaInput = Number(e.inputNumber);
      }
    },
    inputVipChange(e) {
      if (Number(e.inputNumber) <= Number(this.currentUserData.vipRemainingQuota)) {
        this.vipGivenQuotaInput = Number(e.inputNumber);
      } else {
        this.vipGivenQuotaInput = 0;
        this.$showCjToast({
          text: "输入vip名额大于剩余数量！",
          type: "warn",
        });
      }
    },
    addVipNum(e) {
      if (this.vipGivenQuotaInput < Number(this.currentUserData.vipRemainingQuota)) {
        this.vipGivenQuotaInput = Number(e.inputNumber);
      }
    },
    subSvipNum(e) {
      if (this.svipGivenQuotaInput > 0) {
        this.svipGivenQuotaInput = e.inputNumber;
      }
    },
    inputSvipChange(e) {
      if (Number(e.inputNumber) <= Number(this.currentUserData.svipRemainingQuota)) {
        this.svipGivenQuotaInput = Number(e.inputNumber);
      } else {
        this.svipGivenQuotaInput = 0;
        this.$showCjToast({
          text: "输入svip名额大于剩余数量！",
          type: "warn",
        });
      }
    },
    addSvipNum(e) {
      if (this.svipGivenQuotaInput < Number(this.currentUserData.svipGivenQuota)) {
        this.svipGivenQuotaInput = Number(e.inputNumber);
      }
    },
    getShareQuotaSet() {
      let $this = this;
      utilJs.getMethod(global.apiurl + 'Marketing/getShareQuotaSet', function (res) {
        $this.currentUserData = res.data;
      });
    },
    getUserByVipType() {
      if (this.isLoading) {
        return
      }
      let $this = this;
      this.isLoading = true;
      utilJs.getMethod(global.apiurl + 'Marketing/getUserByVipType' + '?name=' + this.searchText + '&page=' + this.page, function (res) {
        if ($this.searchText != '' && $this.isShowDrop == false) {
          $this.isShowDrop = true;
        }
        if ($this.page == 1) {
          $this.userList = res.data.data;
        } else {
          $this.userList = [...$this.userList, ...res.data.data];
        }
        $this.isLoading = false;
        $this.page = res.data.next_page_url ? $this.page + 1 : $this.page;
        $this.is_page = res.data.next_page_url ? true : false;
      });
    },
    presentShareQuota() {
      if (this.isLoading) {
        return;
      }
      if (this.currentUserId == '') {
        this.$cjConfirm({
          title: '提示',
          message: '请选择用户！',
          showCancelButton: false,
          clickCloseModal: false
        })
        return;
      }
      if ((this.moneyGivenQuotaInput == '' || Number(this.moneyGivenQuotaInput) == 0) && (this.vipGivenQuotaInput == '' || Number(this.vipGivenQuotaInput) == 0) && (this.svipGivenQuotaInput == '' && Number(this.svipGivenQuotaInput) == 0)) {
        this.$cjConfirm({
          title: '提示',
          message: '请填写分卡数量！',
          showCancelButton: false,
          clickCloseModal: false
        })
        return;
      }
      if (Number(this.moneyGivenQuotaInput) > Number(this.currentUserData.moneyRemainingQuota) || Number(this.vipGivenQuotaInput) > Number(this.currentUserData.vipRemainingQuota) || Number(this.svipGivenQuotaInput) > Number(this.currentUserData.svipRemainingQuota)) {
        return;
      }
      let data = {
        userId: this.currentUserId,
        moneyGivenQuota: Number(this.moneyGivenQuotaInput),
        vipGivenQuota: this.vipGivenQuotaInput,
        svipGivenQuota: this.svipGivenQuotaInput
      }
      let $this = this;
      this.isLoading = true;
      utilJs.postMethod(global.apiurl + 'Marketing/presentShareQuota', data, function (res) {
        $this.isLoading = false;
        $this.$showCjToast({
          text: "赠送成功",
          type: "success",
        }).then(() => {
          $this.$router.back(-1);
        });
      }, failRes => {
        $this.isLoading = false;
        // $this.$router.back(-1);
      })
    },
    //分享
    wechatShare: function () {
      utilJs.wechatConfig("", "", "", "", function () { });
    },
    //手机端分享
    appShare: function () {
      utilJs.appShareTrue("", "", "", "");
    },
    //下拉获取更多
    windowScrollFunction: function () {
      let that = this;
      let element = document.getElementById('userList');
      utilJs.elementLoading(element, function () {
        if (that.is_page) {
          that.getUserByVipType();
        }
      });
    },
  },
  activated() {
    setDocumentTitle("分卡设置");
    this.page = 1;
    this.limit = 10;
    this.is_page = true;
    this.isLoading = false;
    this.userName = '';
    this.searchText = '';
    this.defultBuyNum = 0;
    this.isShowDrop = false;
    this.currentUserData = null;
    this.userList = [];
    this.moneyGivenQuotaInput = '';
    this.vipGivenQuotaInput = 0;
    this.svipGivenQuotaInput = 0;
    this.currentUserId = '';
    this.isDisabled = false;
    this.getUserByVipType();
    this.getShareQuotaSet();
    this.$nextTick(() => {
      document.getElementById('userList') && document.getElementById('userList').addEventListener('scroll', this.windowScrollFunction);
    })
  },
  deactivated() {
    document.getElementById('userList') && document.getElementById('userList').removeEventListener('scroll', this.windowScrollFunction);
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.center {
  text-align: center;
  position: absolute;
  top: 50%;
  transform: translate(0%, -50%);
}
.top80 {
  top: 2rem;
}
.right80 {
  right: 2rem;
}
.bottom-m30 {
  bottom: -0.75rem;
}
textarea:disabled,
input:disabled {
  background-color: rgb(255, 255, 255) !important;
}
.maxw180 {
  max-width: 4.5rem;
}
</style>
